<!--
 * 功能：
 * 作者： caihan
 * 日期:  2021-8-13 1:48:32 ?F10: PM?
 -->
<template>
	<view class="wrap-main">
		<uni-nav-bar title="项目" :statusBar="true" :fixed="true"></uni-nav-bar>
		<!--  @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption" @emptyclick="emptyClick">
			<block v-for="(data,index) in dataList" :key="index">
				<project-tree-item :data="data"></project-tree-item>
			</block>
		</mescroll-body>
		<!-- fixed元素需写在mescroll-body的外面,否则下拉刷新时会降级为absolute -->
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const systemInfo = uni.getSystemInfoSync();
	export default {
		components: {},
		mixins: [MescrollMixin], // 使用mixin混入对象
		data() {
			return {
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效,(native: true, 则需在pages.json中配置 "enablePullDownRefresh": true)
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				},
				dataList: [],
			}
		},
		computed: {
			//计算属性
		},
		onBackPress() {
			uni.hideKeyboard();
		},
		onLoad: function(options) {},
		onShow: function() {
			// #ifdef APP-NVUE || APP-PLUS
			if (systemInfo.platform == "android") {
				plus.navigator.setStatusBarStyle("dark")
			}
			// #endif
		},
		methods: {
			// 下拉刷新的回调, 有三种处理方式:
			downCallback: function() {
				// // 第1种: 请求具体接口,this.http.post()
				// // 第2种: 下拉刷新和上拉加载调同样的接口, 那么不用第1种方式, 直接mescroll.resetUpScroll()即可
				// this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				// // 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				// this.mescroll.endSuccess()
				// // 若整个downCallback方法仅调用mescroll.resetUpScroll(),则downCallback方法可删 (mixins已默认)
				this.mescroll.resetUpScroll();
			},
			//上拉加载的回调: 携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10
			upCallback: function(page) {
				this.requestProjectTreeList(page)
			},
			//点击空布局按钮的回调
			emptyClick: function() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			requestProjectTreeList: function(page) {
				//联网加载数据
				this.$http.get(`/project/tree/json`)
					.then(res => {
						this.dataList = this.$requestAnalysis(this.dataList,res,this.mescroll)
					})
					.catch(err => {
						if (page.num == 1) {
							//如果是第一页需手动置空列表
							this.dataList = []
							this.mescroll.endSuccess(0, false);
							this.mescroll.optUp.empty.tip = err;
						} else {
							//  请求失败,隐藏加载状态
							this.mescroll.endErr()
						}
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-main {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
